<template>
  <div class="containers">
    <div class="top">
      <figure style="" class="flex_c_c_c">
         <img :src="topData.url" alt="">
      </figure>
      <!-- <img :src="topData.url" alt=""> -->
      <ul class="p_r_30">
        <li class="f_s_34 ellipsis w_3">{{topData.name}}</li>
        <li class="f_c_f">{{topData.mark}}</li>
      </ul>
      <!-- <ul class="p_30">
        <i class="iconfont icon-erweima i_f_42"></i>
        <li>{{topData.date}}</li>
      </ul>
      <ul class="p_30">
        <i class="iconfont icon-erweima i_f_42"></i>
        <li>{{topData.rate}}</li>
      </ul> -->
    </div>
    <div class="infos">
      <div class="info bor-b-e9e9e9">
        <span>客户信息</span>
        <div class="info_ul" @click="C_detail">
          <li>详情</li>
          <i class="iconfont icon-arr-right i_f_42"></i>
        </div>
      </div>
    </div>
    <div class="tags">
      <span style="padding-right:10px;">标签</span>
      <ul class="tags_ul ellipsis">
        <li class="tag f_c_f" v-for="(item,index) in tableList" :key="index">{{item.name||'kong'}}</li>
      </ul>
      <ul class="info_ul">
        <li>更多</li>
        <i class="iconfont icon-arr-right i_f_42"></i>
      </ul>
    </div>
    <cmpTabs @F_GetTabsIndex="F_GetTabsIndex" :tabs="tabs"></cmpTabs>
    <per_del_3 v-show="listIndex == 0" class="per_del_3" :lists="per_del_3_list"></per_del_3>
    <per_del_4 v-show="listIndex == 1" class="per_del_4" :lists="per_del_4_list"></per_del_4>
    <C_AI v-if="listIndex == 2" :AIdatas="AIdatas"></C_AI>

    <div class="model" style="z-index:2" v-if="ModelShow && ModelShowIndex == 0">
      <span v-for="(item,index) in C_detailData" :key="index">
       <tr style="width:70px;">{{item.name}}:</tr>
        <!-- <input type="text" :placeholder="item.value" disabled @blur="onFocus(index)"> -->
        <h6 style="color:#858585;font-size:14px; font-weight: 300">{{item.value||'暂未填写数据'}}</h6>
        <!-- <i class="iconfont "></i> -->
      </span>
      <!-- <button @click="ModelSubmit"> 提交 </button> -->
    </div>
    <!-- <div class="model" style="z-index:2" v-if="ModelShow && ModelShowIndex == 1">
      <span v-for="(item,index) in C_detailData" :key="index">
        {{item.name}}:
        <input type="text" :placeholder="`请输入${item.name}...`" disabled v-model="item.num" @blur="onFocus(index)">
        <i class="iconfont "></i>
      </span>
    </div> -->

    <div class="z-index_999" @click="z_index" v-if="IndexShow" :style="{height:z_index_height+'px'}"></div>
  </div>
</template>

<script>
import Common from "../assets/js/common.js";
let Mycommon = new Common();

import cmpTabs from "./common/index_tabs.vue";
import per_del_3 from "./common/per_del_3.vue";
import per_del_4 from "./common/per_del_4.vue";
import C_AI from "./common/C_AI.vue";
export default {
  components: { cmpTabs, per_del_3, C_AI, per_del_4 },
  data() {
    return {
      topData: { name: "", url: "", date: "", rate: "", mark: "" },
      tabs: ["浏览记录", "跟进记录", "AI分析"],
      listIndex: 0,
      ModelShow: false,
      ModelShowIndex: "0",
      IndexShow: false,
      //style
      z_index_height: "0",
      total_page: "",
      page: "1",
      per_del_3_list: [],

      per_del_4_list: [],

      C_detailData: [], //
      tablsList: [],

      AIdatas: {}, //

      tableList: []
    };
  },
  created() {
    this.routeId();
  },
  mounted() {
    this.z_index_height = JSON.stringify(document.body.clientHeight);
    this.clientViewData(); //浏览记录
    this.onReachBottom();

    this.tablsMore()

    this.InterestData();
    this.ActivityData();
    this.clientInteractionData();
  },
  computed:{
    user_id(){
      return this.$store.state.id
    }
  },
  methods: {
    //判断滑动触底
    onReachBottom() {
      let that = this;
      let div = document.getElementsByClassName("per_del_3")[0];
       div.onscroll = function() {
        let height = div.clientHeight + div.scrollTop + 30;
        if (height > div.scrollHeight) {
          if (that.listIndex == 0 && that.total_page > that.page) {
            that.page++;
            that.clientViewData(that.page);
          }
        }
      };
    },
    //得到具体的id
    routeId() {
      this.name = this.$route.params.name;
      this.$route.params.staff_id
        ? (this.staff_id = this.$route.params.staff_id)
        : (this.staff_id = "3");
      let aa = {
        avatarUrl:
          "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLy7hXZxp1XvxPibrYwJKe0SqWqhZVNoeqAjyrodtEsuInnhC6QkFbJic3MBCOVvITzibwQevj6Zic16w/132",
        date: 0,
        id: "719",
        mark: 0,
        money: 0,
        name: "",
        nickName: "潇潇",
        order: 0,
        rate: 0
      };
      let item = this.$route.params.item ? this.$route.params.item : aa;

      this.client_id = item.id;
      this.topData.name = item.nickName;
      this.topData.url = item.avatarUrl;
      this.topData.date = item.date;
      this.topData.rate = item.rate;
      if (item.mark == 0) {
        this.topData.mark = "从未跟进";
      } else if (item.mark == 1) {
        this.topData.mark = "跟进中";
      } else {
        this.topData.mark = "已成交";
      }
    },
    //得到客户的浏览记录
    clientViewData(page) {
      let that = this;
      let pages = page || that.page;
      let data = {
        staff_id: this.staff_id,
        client_id: this.client_id,
        page: pages
      };
      let url = "clientView";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let resList = res.data.data.list;
          that.total_page = res.data.data.total_page;
          resList.forEach(val => {
            val.create_time = Mycommon.dates(val.create_time);
            val.url = that.topData.url;
            if (val.sign == "praise") {
              val.signdata = {};
              if (val.type == "1") {
                val.signdata.val1 = "语音点赞";
              } else if (val.type == "2") {
                val.signdata.val1 = "查看了你的信息";
              } else if (val.type == "3") {
                val.signdata.val1 = "对官网点赞了";
              } else if (val.type == "4") {
                val.signdata.val1 = "进行了分享操作";
              }
            } else if (val.sign == "view") {
              val.viewdata = {};
              if (val.type == "1") {
                val.viewdata.val1 = "浏览商城列表";
              } else if (val.type == "2") {
                val.viewdata.val1 = "浏览商品详情";
              } else if (val.type == "3") {
                val.viewdata.val1 = "浏览动态列表";
              } else if (val.type == "4") {
                val.viewdata.val1 = "点赞动态";
              } else if (val.type == "5") {
                val.viewdata.val1 = "动态留言";
              } else if (val.type == "6") {
                val.viewdata.val1 = "浏览公司官网";
              } else if (val.type == "7") {
                val.viewdata.val1 = "浏览动态详情";
              }
            } else if (val.sign == "copy") {
              val.copydata = {};
              if (val.type == "1") {
                val.copydata.val1 = "同步到通讯录";
              } else if (val.type == "2") {
                val.copydata.val1 = "拨打手机号";
              } else if (val.type == "3") {
                val.copydata.val1 = "拨打座机号";
              } else if (val.type == "4") {
                val.copydata.val1 = "复制微信";
              } else if (val.type == "5") {
                val.copydata.val1 = "复制邮箱";
              } else if (val.type == "6") {
                val.copydata.val1 = "复制公司名";
              } else if (val.type == "7") {
                val.copydata.val1 = "查看定位";
              } else if (val.type == "8") {
                val.copydata.val1 = "咨询产品";
              } else if (val.type == "9") {
                val.copydata.val1 = "播放语音";
              }
            }
          });
          // console.log(resList)
          if (that.per_del_3_list[0]) {
            resList.forEach(val => {
              that.per_del_3_list.push(val);
            });
          } else {
            that.per_del_3_list = resList;
          }
        }
      });
    },
    //得到员工的跟进记录
    followListData(page) {
      let that = this;
      let data = {
        staff_id: this.staff_id,
        client_id: this.client_id,
        page: page
      };
      let url = "followList";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let resList = res.data.data.list;
          that.total_page = res.data.data.total_page;
          resList.forEach(val => {
            val.create_time = Mycommon.dates(val.create_time);
            (val.url = that.topData.url);
          });
          // console.log(resList)
          if (that.per_del_4_list[0]) {
            resList.forEach(val => {
              that.per_del_4_list.push(val);
            });
          } else {
            that.per_del_4_list = resList;
          }
          // console.log(res.data.data.total_page);
        }
      });
    },
    //ai
    InterestData() {
      let that = this;
      let data = {
        user_id: this.user_id,
        staff_id: this.staff_id,
        client_id: this.client_id,
        type: "3"
      };
      let url = "Interest";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let list = res.data.data;
          // //漏斗图
          let interestName = ["对公司感兴趣", "对产品感兴趣", "对员工感兴趣"];
          let interestList = [];
          for (let i in list) {
            interestList.push({ value: list[i].count });
          }
          interestList.forEach((val, index) => {
            val.name = interestName[index];
          });
          that.AIdatas.interestName = interestName;
          that.AIdatas.interestList = interestList;
        }
      });
    },
    ActivityData() {
      let that = this;
      let data = {
        staff_id: this.staff_id,
        client_id: this.client_id,
        type: "2"
      };
      let url = "Activity";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let list = res.data.data;
          let activityName = [];
          let activityList = [];
          list.forEach((val, index) => {
            activityName.push(val.date.substring(5));
            activityList.push(val.count);
          });
          that.AIdatas.activityName = activityName;
          that.AIdatas.activityList = activityList;
        }
      });
    },
    clientInteractionData() {
      let that = this;
      let data = {
        staff_id: this.staff_id,
        client_id: this.client_id,
        type: "3"
      };
      let url = "clientInteraction";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let list = res.data.data;
          // console.log(list)
          that.AIdatas.clientInteractionList = []
          // console.log(data)
           
          for(let i in list)

            that.AIdatas.clientInteractionList.push({name:list[i].title,num:list[i].count,rate:list[i].rate})
          
          
        }
      });
    },
    F_GetTabsIndex(index) {
      this.listIndex = index;
      //浏览记录清空
      this.page = "1";
      this.per_del_3_list = [];
      this.per_del_4_list = [];

      if (this.listIndex == 0) {
        this.clientViewData(this.page);
      } else if (this.listIndex == 1) {
        this.followListData(this.page); //员工跟进记录
      }
    },
    //信息
    C_detail() {
      let that = this;
      that.C_detailData = [];
      this.ModelShowIndex = 0;
      let data = {
        user_id: this.user_id,
        staff_id: this.staff_id,
        client_id: this.client_id
      };
      let url = "clientInfo";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let data = [
            { type: "name", name: "姓名", value: "暂未填写" },
            { type: "sex", name: "性别", value: "暂未填写" },
            { type: "phone", name: "手机号", value: "暂未填写" },
            { type: "email", name: "邮箱", value: "暂未填写" },
            { type: "company", name: "公司", value: "暂未填写" },
            { type: "position", name: "职位", value: "暂未填写" },
            { type: "address", name: "地址", value: "暂未填写" },
            { type: "birthday", name: "生日", value: "暂未填写" }
          ];
          that.C_detailData = data
          let infos = res.data.data.info
          // console.log(res.data.data.info);
          for(let i in infos){
            data.forEach(val=>{
              if(val.type == i){
                val.value = infos[i]
              }
            })
            
          //  that.C_detailData.push({name:i,num:res.data.data.info[i]})
          }
           that.ModelShow = true;
           that.IndexShow = true;
        }
      });
    },
    //标签
    tablsMore() {
      let that = this;
      this.ModelShowIndex = 1;
      let data = {
        target_id: this.staff_id,
        client_id: this.client_id
      };
      let url = "Labels";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          // cosnole.log(res)
          let list = res.data.data;
          if (list[0]) {
            that.tableList = list.splice(0, 2);
            that.ModelShow = true;
            that.IndexShow = true;
          }
        }
      });
    },
    z_index() {
      this.ModelShow = false;
      this.IndexShow = false;
    },
    onFocus(index) {
      // console.log(index)
    }
  }
};
</script>

<style scoped>
.f_s_34 {
  font-size: 34px;
}
.f_c_f {
  color: #fc1111;
  padding: 10px 0;
}
.f_c_bf {
  color: #bfbfbf;
}
/* .p_r_30 {
   width: 180px; 
} */
.p_30 {
  padding: 0 30px;
}
.i_f_42 {
  font-size: 32px;
  color: #bfbfbf;
  padding-left: 20px;
}

img {
  width: 84px;
  height: 84px;
  margin: 0 20px;
  border-radius: 40px;
}

.containers {
  width: 100vw;
  display: flex;
  flex-direction: column;
  font-size: 28px;
}
.top {
  width: 100vw;
  height: 200px;
  display: flex;
  background: #fff;
  align-items: center;
}
.infos {
  width: 100vw;
  height: 100px;
  display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.info {
  width: 96vw;
  height: 100px;
  display: flex;
  background: #fff;
  justify-content: space-between;
  align-items: center;
}
.info_ul {
  height: 100px;
  display: flex;
  align-items: center;
}
.tags {
  width: 96vw;
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  padding: 0 2vw;
}
.tags_ul {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.model {
  position: fixed;
  left: 5vw;
  top: 20vw;
  background: #fff;
  width: 90vw;
  min-height: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 40px;
}
.model input {
  width: 60vw;
  height: 50px;
  /* border: 1px solid #878181; */
  /* background: #bfbfbf; */
  border-radius: 10px;
}
.model input:focus {
  border-color: black;
  outline: 0;
  box-shadow: 0 0 80px orange inset;
  /* 0 0 80px orange outset; */
}
.model button {
  border: 1px solid orange;
  border-radius: 30px;
  background: #fff;
  font-size: 30px;
  padding: 10px 50px;
}
.model span{
  display:flex;
  align-items: center;
  justify-content: space-between;
  width:80vw;
  height:80px;
  border-bottom:1px solid #e4e5e6;
}
.model button:active {
  background: orange;
}
.model button:focus {
  outline: 0;
 
}
</style>
